<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>新建传输 - Multi Transfer</title>
    <!-- Bootstrap CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .navbar {
            background-color: #4a6cf7 !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
            margin-bottom: 20px;
        }

        .btn-primary {
            background-color: #4a6cf7;
            border-color: #4a6cf7;
        }

        .btn-primary:hover {
            background-color: #3a5ce5;
            border-color: #3a5ce5;
        }

        .form-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.5rem;
        }

        .form-control:focus {
            border-color: #4a6cf7;
            box-shadow: 0 0 0 0.25rem rgba(74, 108, 247, 0.25);
        }

        .form-select:focus {
            border-color: #4a6cf7;
            box-shadow: 0 0 0 0.25rem rgba(74, 108, 247, 0.25);
        }

        .file-upload-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }

        .file-upload-input {
            position: absolute;
            left: -9999px;
        }

        .file-upload-label {
            display: block;
            padding: 10px 15px;
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .file-upload-label:hover {
            background-color: #e9ecef;
        }

        .file-name {
            margin-top: 0.5rem;
            color: #6c757d;
            font-size: 0.9rem;
        }

        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid rgba(0, 0, 0, .125);
            font-weight: 600;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="bi bi-cloud-arrow-up"></i> Multi Transfer
        </a>
        <button class="navbar-toggler" data-bs-target="#navbarNav" data-bs-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/transfer}">传输列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#">新传输</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主要内容 -->
<div class="container mt-4">
    <div class="row mb-4">
        <div class="col-md-8">
            <h1 class="display-5 fw-bold">新传输</h1>
            <p class="lead">创建一个新的传输项目并分享给他人</p>
        </div>
        <div class="col-md-4 text-end">
            <a class="btn btn-outline-secondary mt-3" th:href="@{/transfer}">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>
    </div>

    <!-- 表单 -->
    <div class="card">
        <div class="card-header">
            <i class="bi bi-pencil-square"></i> 填写传输信息
        </div>
        <div class="card-body">
            <form enctype="multipart/form-data" method="post" th:action="@{/transfer}">
                <!-- 内容输入 -->
                <div class="mb-4">
                    <label class="form-label" for="content">
                        <i class="bi bi-text-paragraph"></i> 传输内容
                    </label>
                    <textarea class="form-control" id="content" name="content" placeholder="请输入传输内容..." required
                              rows="6"></textarea>
                    <div class="form-text">请详细描述您要传输的内容</div>
                </div>

                <!-- 文件上传 -->
                <div class="mb-4">
                    <label class="form-label">
                        <i class="bi bi-paperclip"></i> 附件（可选）
                    </label>
                    <div class="file-upload-wrapper">
                        <input class="file-upload-input" id="file" name="file" type="file">
                        <label class="file-upload-label" for="file">
                            <i class="bi bi-cloud-upload"></i> 选择文件上传
                        </label>
                        <div class="file-name" id="file-name">未选择文件</div>
                    </div>
                    <div class="form-text">支持上传任意类型文件，最大文件大小：10MB</div>
                </div>

                <!-- 提交按钮 -->
                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <a class="btn btn-outline-secondary me-md-2" th:href="@{/transfer}">
                        <i class="bi bi-x-circle"></i> 取消
                    </a>
                    <button class="btn btn-primary" type="submit">
                        <i class="bi bi-send"></i> 新建传输
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="bg-light text-center py-3 mt-5">
    <div class="container">
        <p class="mb-0 text-muted">© 2023 Multi Transfer. All rights reserved.</p>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>

<!-- 文件上传预览 -->
<script>
    document.getElementById('file').addEventListener('change', function () {
        const fileName = this.files[0] ? this.files[0].name : '未选择文件';
        document.getElementById('file-name').textContent = fileName;
    });
</script>
</body>
</html>
